<script setup lang="ts">
  import { deleteUserMessage, getusermsglist } from '@/api/syssetting';
  import { ref } from 'vue';
  import { TableInstance, Message } from '@arco-design/web-vue';
  import Add from './add/index.vue';
  import Edit from './edit/index.vue';
  import Detail from './detail/index.vue';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  defineOptions({
    name: 'companyList',
  });
  const { loading, setLoading } = useLoading(false);
  const proTableRef = ref<TableInstance | null>(null);
  // 表单类型
  // 表单类型
  const formType = ref([
    {
      label: '类型',
      name: 'msg_type',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          value: 1,
          label: '系统消息',
        },
        {
          value: 2,
          label: '个人消息',
        },
      ],
    },
    {
      label: '状态',
      name: 'msg_state',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          value: 1,
          label: '未读',
        },
        {
          value: 2,
          label: '已读',
        },
      ],
    },
    {
      label: '时间',
      name: 'create_time_start',
      type: 'a-range-picker',
      fieldProps: {
        span: 12,
        showTime: true,
        timePickerProps: "{ defaultValue: ['00:00:00', '09:09:06'] }",
        format: 'YYYY-MM-DD HH:mm',
      },
    },
  ]);
  onMounted(async () => {});

  const visible = ref(false);
  const isEdit = ref(false);
  const visible1 = ref(false);
  const visible2 = ref(false);
  const editParam = ref();
  const tableType = [
    { dataIndex: 'msg_id', slotName: 'id' },
    {
      title: '标题',
      dataIndex: 'msg_title',
    },
    {
      title: '类型',
      dataIndex: 'msg_type',
      align: 'center',
      slotName: 'tags',
      options: [
        {
          value: 1,
          label: '系统消息',
          color: 'green',
        },
        {
          value: 2,
          label: '个人消息',
          color: 'red',
        },
      ],
    },
    {
      title: '是否已读',
      dataIndex: 'msg_state',
      align: 'center',
      slotName: 'status',
      options: [
        {
          status: 'danger',
          value: 1,
          label: '未读',
        },
        {
          value: 2,
          label: '已读',
          status: 'success',
        },
      ],
    },
    {
      title: '内容',
      dataIndex: 'msg_content',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: (record: any) => {
        let arr = [];
        if (Number(record.msg_type) === 1) {
          arr = [
            {
              name: '删除',
              onClick: (record: any) => {
                deleteUserMessage({
                  msg_ids: [record.msg_id],
                }).then((res: any) => {
                  proTableRef.value?.setRefresh();
                  Message.success('删除成功！');
                });
              },
            },
          ];
        } else {
          arr = [
            {
              name: '回复',
              onClick: (record: any) => {
                visible1.value = true;
                editParam.value = {
                  id: record.msg_id,
                };
              },
            },
            {
              name: '删除',
              onClick: (record: any) => {
                deleteUserMessage({
                  msg_ids: [record.msg_id],
                }).then((res: any) => {
                  proTableRef.value?.setRefresh();
                  Message.success('删除成功！');
                });
              },
            },
          ];
        }
        arr.unshift({
          name: '详情',
          onClick: (record: any) => {
            visible2.value = true;
            editParam.value = {
              id: record.msg_id,
            };
          },
        });
        return arr;
      },
    },
  ];
  const userStore = useUserStore();
  async function request(params: any) {
    const res = await getusermsglist({
      ...params,
      create_time_start: params.create_time_start
        ? params.create_time_start[0]
        : '',
      create_time_end: params.create_time_start
        ? params.create_time_start[1]
        : '',
    });
    return {
      data: res.data,
    };
  }
  const sonformType = ref([
    {
      name: 'msg_title',
      label: '消息主题',
      type: 'a-input',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      name: 'msg_content',
      label: '消息内容',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
        mode: 'button',
        min: 1,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      label: '消息接收人',
      name: 'msg_to_user',
      type: 'a-select',
      fieldProps: {
        placeholder: '请选择接收人',
        span: 24,
        fieldNames: { value: 'user_id', label: 'user_name' },
        allowSearch: true,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
      selectOptions: userStore.allUserInfo,
    },
  ]);
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="消息列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-email />
          </template>
          发布消息
        </a-button></template
      >
      <template #options>
        <Add
          v-if="visible"
          v-model:visible="visible"
          :formType="sonformType"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
        <edit
          v-if="visible1"
          v-model:visible="visible1"
          :formType="sonformType"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
        <Detail
          v-if="visible2"
          v-model:visible="visible2"
          :formType="sonformType"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
  </div>
</template>

<style scoped lang="less"></style>
